<template>
  <div class="container">
    <h3 class="title">
      <svg-icon icon-class="nested"
                class="title-icon" />设备管理
    </h3>

    <el-card>
      <div slot="header">
        <span>设备详情</span>
      </div>
      <div>
        <span style="display: inline-block;margin-bottom:10px;">基本信息</span>
        <el-form :inline="true"
                 class="demo-form-inline">
          <el-form-item label="设备编号:"
                        style="margin-right:50px;margin-bottom: 15px;">
            <span>{{detail.no}}</span>
          </el-form-item>
          <el-form-item label="所属项目:"
                        style="margin-right:50px;margin-bottom: 15px;">
            <span>{{detail.projectName}}</span>
          </el-form-item>
          <el-form-item label="管理员姓名:"
                        style="margin-right:50px;margin-bottom: 15px;">
            <span>{{detail.managementName}}</span>
          </el-form-item>
          <el-form-item label="管理员手机号:"
                        style="margin-right:50px;margin-bottom: 15px;">
            <span>{{detail.managementPhone}}</span>
          </el-form-item>
          <!-- <el-form-item label="摄像头IP地址:"
                        style="margin-bottom: 15px;">
            <span>{{detail.cameraIp}}</span>
          </el-form-item> -->
          <el-form-item label="激活码:"
                        style="margin-bottom: 15px;">
            <span>{{detail.activationCode}}</span>
          </el-form-item>
        </el-form>
        <el-button type="primary"
                   style="margin-bottom: 20px;"
                   @click="edit">编辑</el-button>
      </div>

      <panel-group :deviceStatus="detail.deviceStatus"
                   :projectName="detail.projectName"></panel-group>
      <div style="border-top:1px solid #e6ebf5;margin-bottom:10px;">
        <h3 class="title3">
          运行记录
          <el-button type="primary"
                     class="export"
                     size="mini">
            <a :href="href"
               download>导出</a>
          </el-button>
        </h3>
        <el-table :data="tableData"
                  min-height="300"
                  border
                  stripe
                  style="width: 100%;margin-bottom:10px;">
          <el-table-column prop="id"
                           label="序号"></el-table-column>
          <el-table-column prop="deviceTypeName"
                           label="类型"></el-table-column>
          <el-table-column label="开始时间">
            <template slot-scope="scope">{{scope.row.startTime|getTime}}</template>
          </el-table-column>
          <el-table-column prop="name"
                           label="结束时间"></el-table-column>
          <el-table-column prop="address"
                           label="操作用时（分钟）"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange"
                       v-if="totalPage>0"
                       @current-change="handleCurrentChange"
                       :current-page="page"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="totalPage"
                       style="float: right;"></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import PanelGroup from "./PanelGroup2";
import { getToken } from "@/utils/auth";
import { getDetail, getDetailList } from "@/api/device";
export default {
  name: "detailManage",
  components: {
    PanelGroup
  },
  data () {
    return {
      detail: "",
      tableData: [],
      id: "",
      page: 1,
      pageSize: 10,
      totalPage: 0,
      href: ""
    };
  },
  mounted () {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getD(this.id);
    }

    var token = getToken();
    this.href =
      process.env.VUE_APP_BASE_API +
      "/pc/management/device/expotxlsx?token=" +
      token +
      "&id=" +
      this.id;
    console.log(this.href);
    this.getData(this.id);
  },
  filters: {
    getTime (timestamp) {
      var time = new Date(timestamp);
      var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
      var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
      M = m < 10 ? "0" + M : M;
      var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
      d = d < 10 ? "0" + d : d;
      var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
      h = h < 10 ? "0" + h : h;
      var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
      m = m < 10 ? "0" + m : m;
      var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
      s = s < 10 ? "0" + s : s;
      return y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
    }
  },
  methods: {
    edit () {
      this.$router.push({ path: "/manage/edit", query: { id: this.id } });
    },
    getData (id) {
      getDetailList(id, this.page, this.pageSize).then(res => {
        console.log(res);
        this.tableData = res.data;
        this.totalPage = res.recordsTotal;
      });
    },
    getD (id) {
      getDetail(id).then(res => {
        this.detail = res.data;
        console.log(this.detail);
      });
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.getData(this.id);
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getData(this.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 400;
    .title-icon {
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header {
    padding: 18px 0;
    margin: 0 20px;
  }
}
.title-small {
  font-size: 14px;
}
.title3 {
  height: 30px;
  overflow: hidden;
}
.export {
  float: right;
}
.money {
  color: #409eff;
}
</style>
